<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>骰子</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body{
				display: flex;
			}

			.first-face {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.second-face {
				display: flex;
				justify-content: space-between;
				padding: 8px;
				box-sizing: border-box;
			}

			.second-face .pip:nth-of-type(2) {
				align-self: flex-end;
			}

			.three-face {
				display: flex;
				padding: 6px;
				box-sizing: border-box;
			}

			.three-face .pip:nth-of-type(2) {
				align-items: center;
				align-self: center;
			}

			.three-face .pip:nth-of-type(3) {
				align-self: flex-end;
				align-items: baseline;

			}

			.four-face {
				padding: 5px;
				box-sizing: border-box;
				justify-content: space-between;
				color: white;

			}

			.four-face .column {
				display: flex;
				flex-direction: column;
				/* border :1px solid red; */
				text-align: center;
				justify-content: space-between;
				flex-wrap: wrap;
				align-items: center;
			}


			.five-face,
			.six-face {
				padding: 5px;
				box-sizing: border-box;
				justify-content: space-between;
				color: white;
			}

			.six-face {
				padding: 15px 5px;
			}

			.five-face .column,
			.six-face .column {
				display: flex;
				flex-direction: column;
				/* border :1px solid red; */
				text-align: center;
				justify-content: space-between;
				flex-wrap: wrap;
				align-items: center;
			}

			.five-face .column:nth-of-type(2) {

				flex-direction: column;
				justify-content: center;
				flex-wrap: wrap;
				align-items: center;
			}

			div[class$=face] {
				display: flex;
				margin: 10px;
				background-color: #e7e7e7;
				width: 104px;
				height: 104px;
				object-fit: contain;
				box-shadow:
					inset 0 5px white,
					inset 0 -5px #bbb,
					inset 5px 0 #d7d7d7,
					inset -5px 0 #d7d7d7;

				border-radius: 10%;
			}

			.pip {
				display: block;
				width: 24px;
				height: 24px;
				border-radius: 50%;
				margin: 4px;

				background-color: #333;
				box-shadow: inset 0 3px #111, inset 0 -3px #555;
			}
		</style>
	</head>
	<body>
		<div class="first-face">
			<span class="pip"></span>
		</div>
		<div class="second-face">
			<span class="pip"></span>
			<span class="pip"></span>
		</div>

		<div class="three-face">
			<span class="pip"></span>
			<span class="pip"></span>
			<span class="pip"></span>
		</div>
		<div class="four-face">
			<div class="column">
				<span class="pip">1</span>
				<span class="pip">2</span>
			</div>
			<div class="column">
				<span class="pip">3</span>
				<span class="pip">4</span>
			</div>
		</div>
		<div class="five-face">
			<div class="column">
				<span class="pip">1</span>
				<span class="pip">2</span>
			</div>
			<div class="column">
				<span class="pip">5</span>
			</div>
			<div class="column">
				<span class="pip">3</span>
				<span class="pip">4</span>
			</div>
		</div>
		<div class="six-face">
			<div class="column">
				<span class="pip">1</span>
				<span class="pip">2</span>
			</div>
			<div class="column">
				<span class="pip">5</span>
				<span class="pip">6</span>
			</div>
			<div class="column">
				<span class="pip">3</span>
				<span class="pip">4</span>
			</div>
		</div>
	</body>
</html>
